@import "../../../designer/style/DesignerStyle.less";

.lc-radio {
  .radio-buttons {
    display: flex;
    flex-direction: row;

    .radio-button {
      display: flex;
      align-items: center;
      margin-right: 10px;
      cursor: pointer;

      input[type="radio"] {
        display: none;
      }

      .radio-circle {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: 2px solid #aaa;
        position: relative;
        margin-right: 5px;
      }

      .radio-circle::before {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #ddd;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition: all 0.2s ease-in-out;
      }

      input[type="radio"]:checked + .radio-circle::before {
        transform: translate(-50%, -50%) scale(1);
        background-color: #aeaeae;
      }

      .radio-label {
        color: @lc-config-value;
        font-size: @lc-font-sm;
        font-weight: bold;
      }
    }

    .radio-button:hover .radio-circle {
      border-color: #555;
    }

    .radio-button:hover input[type="radio"]:checked + .radio-circle::before {
      background-color: #555;
    }

  }
}